<template>
  <div>
    <a-modal @ok="ok" @cancel="cancel" v-bind:open="testContent2.isShowModal" :title="testContent2.title">
      <div v-for="content in testContent2.contentList" :key="content.id">
        <a-form v-if="content.type === 'form'" :disabled="content.isCheck" ref="formRef" :rules="content.rules" 
          :model="content.bindData" :labelAlign="right">
          <a-form-item v-for="(item, index) in content.contentItemList" :label="item.label" :name="item.key">
            <a-input v-if="item.type === 'input'" v-model:value="content.bindData[item.key]"></a-input>
            <a-textarea v-if="item.type === 'textarea'" v-model:value="content.bindData[item.key]"></a-textarea>
            <a-select v-if="item.type === 'select'" v-model:value="content.bindData[item.key]">
              <a-select-option v-for="(option, index) in item.options" :key="index" :value="option.value">{{
                option.label }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <div v-if="content.type === 'publish'">{{ content.text }}</div>
        <div v-if="content.type === 'delete'">{{ content.text }}</div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>

import { provide, ref, onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
  title: {
    type: String
  },
  isShowModal: {
    type: Boolean
  },
  testContent2: {},
})
const formRef = ref(null)

const emit = defineEmits(['handleOk', 'handleCancel'])

const ok = () => {
  formRef.value.forEach(item => {
    item.validate().then(() => {
      emit('handleOk')
    }).catch(err => {
      console.log(err, 'err--------------')
    })
  })
}

const cancel = () => {
  emit('handleCancel')
}
</script>
<style></style>